import React, { useEffect, useMemo, useContext } from 'react'
import { createBehavior, createResource } from '@designable/core'
import { Form as FormilyForm, Submit } from '@formily/antd'
import { DnFC } from '@designable/react'
import { AllSchemas } from '../../schemas'
import { AllLocales } from '../../locales'
import './styles.less'
import { createFieldSchema } from '../Field'

export const Form: DnFC<React.ComponentProps<typeof FormilyForm>> = FormilyForm

Form.Behavior = createBehavior({
  name: 'Form',
  extends: ['Field'],
  selector: (node) => node.props['x-component'] === 'Form',
  designerProps: {
    propsSchema: createFieldSchema(AllSchemas.FormLayout),
    droppable: true,
    defaultProps: {
      labelCol: 6,
      wrapperCol: 12,
    },
  },
  designerLocales: AllLocales.Form,
})

Form.Resource = createResource({
  icon: 'FormLayoutSource',
  elements: [
    {
      componentName: 'Field',
      props: {
        type: 'void',
        'x-component': 'Form',
      },
    },
  ],
})
